<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/放大镜.css">
</head>

<body>
    <div class="box">
        <div class="shade"></div>
        <div class="show"></div>
    </div>
    <div class="allItem"></div>
    <script>
        var imgs = [
            "https://img13.360buyimg.com/n1/jfs/t1/205713/9/10194/753629/6160064dEf1cf949c/ca0cf4fcf814018e.jpg.avif",
            "https://img13.360buyimg.com/n1/jfs/t1/110182/29/17349/204690/614c1f97Ee2703230/068626550574afd3.jpg.avif",
            "https://img13.360buyimg.com/n1/jfs/t1/90341/5/18589/263987/614aeb46E2054198d/0aa917e89aa5c550.jpg.avif",
            "https://img13.360buyimg.com/n1/jfs/t1/75029/23/16958/317967/614c1f8dEa7f88ce3/97c122db861e083b.jpg.avif",
            "https://img13.360buyimg.com/n1/jfs/t1/205834/34/7756/345438/614c1f8cEa270308d/feea15baa64a9457.jpg.avif"
        ]
        var box = document.querySelector(".box");
        var shade = document.querySelector(".shade");
        var shadeStyle = getComputedStyle(shade, null);
        var show = document.querySelector(".show");
        var showStyle = getComputedStyle(show, null);
        var allItem = document.querySelector(".allItem");
        for (var i = 0; i < imgs.length; i++) {
            var item = document.createElement("div");
            item.classList.add("item");
            if (i == 0) item.classList.add("active");
            item.style.background = `url(${imgs[i]}) no-repeat`;
            item.style.backgroundSize = "cover";
            allItem.appendChild(item);
            item.onmouseenter = function () {
                if (this === document.querySelector(".active")) return;
                box.style.backgroundImage = getComputedStyle(this, null).backgroundImage;
                show.style.backgroundImage = getComputedStyle(this, null).backgroundImage;
                document.querySelector(".active").classList.remove("active");
                this.classList.add("active");
            }
        }

        shade.onmouseenter = function () {
            var div = document.createElement("div");
            div.classList.add("see");
            box.appendChild(div);
            show.style.visibility = "visible";
        }
        shade.onmouseleave = function () {
            document.querySelector(".see").remove();
            show.style.visibility = "hidden";
        }
        shade.onmousemove = function (e) {
            var see = document.querySelector(".see");
            var seeStyle = getComputedStyle(see, null);
            var left = e.offsetX - parseInt(seeStyle.width) / 2;
            var top = e.offsetY - parseInt(seeStyle.height) / 2;
            var catWidth = parseInt(shadeStyle.width) - parseInt(seeStyle.width);
            var catHeigth = parseInt(shadeStyle.height) - parseInt(seeStyle.height);
            see.style.left = left <= 0 ? 0 : left >= catWidth ? catWidth + 'px' : left + "px";
            see.style.top = top <= 0 ? 0 : top >= catHeigth ? catHeigth + "px" : top + "px";
            var howBig = parseInt(showStyle.width) / parseInt(seeStyle.width);
            show.style.backgroundSize = `${parseInt(showStyle.width) * howBig + "px"} ${parseInt(showStyle.height) * howBig + "px"}`;
            show.style.backgroundPosition = `-${parseInt(getComputedStyle(see, null).left) * howBig + "px"} -${parseInt(getComputedStyle(see, null).top) * howBig + "px"}`;
        }
    </script>
</body>

</html>